<template>
  <div class="fontawesome-demo">
    <h2>FontAwesome 图标示例</h2>
    
    <div class="icon-section">
      <h3>基础图标</h3>
      <div class="icon-row">
        <div class="icon-item">
          <font-awesome-icon :icon="['fas', 'home']" />
          <span>首页</span>
        </div>
        <div class="icon-item">
          <font-awesome-icon :icon="['fas', 'user']" />
          <span>用户</span>
        </div>
        <div class="icon-item">
          <font-awesome-icon :icon="['fas', 'cog']" />
          <span>设置</span>
        </div>
      </div>
    </div>
    
    <div class="icon-section">
      <h3>品牌图标</h3>
      <div class="icon-row">
        <div class="icon-item">
          <font-awesome-icon :icon="['fab', 'github']" />
          <span>GitHub</span>
        </div>
        <div class="icon-item">
          <font-awesome-icon :icon="['fab', 'twitter']" />
          <span>Twitter</span>
        </div>
        <div class="icon-item">
          <font-awesome-icon :icon="['fab', 'vuejs']" />
          <span>Vue.js</span>
        </div>
      </div>
    </div>
    
    <div class="icon-section">
      <h3>图标大小</h3>
      <div class="icon-row">
        <div class="icon-item">
          <font-awesome-icon :icon="['fas', 'star']" size="xs" />
          <span>超小</span>
        </div>
        <div class="icon-item">
          <font-awesome-icon :icon="['fas', 'star']" size="sm" />
          <span>小</span>
        </div>
        <div class="icon-item">
          <font-awesome-icon :icon="['fas', 'star']" />
          <span>默认</span>
        </div>
        <div class="icon-item">
          <font-awesome-icon :icon="['fas', 'star']" size="lg" />
          <span>大</span>
        </div>
        <div class="icon-item">
          <font-awesome-icon :icon="['fas', 'star']" size="2x" />
          <span>2倍</span>
        </div>
      </div>
    </div>
    
    <div class="icon-section">
      <h3>动画效果</h3>
      <div class="icon-row">
        <div class="icon-item">
          <font-awesome-icon :icon="['fas', 'spinner']" spin />
          <span>旋转</span>
        </div>
        <div class="icon-item">
          <font-awesome-icon :icon="['fas', 'circle-notch']" spin />
          <span>加载中</span>
        </div>
        <div class="icon-item">
          <font-awesome-icon :icon="['fas', 'sync']" pulse />
          <span>脉冲</span>
        </div>
      </div>
    </div>

    <div class="icon-section">
      <h3>主题色</h3>
      <div class="icon-row">
        <div class="icon-item">
          <Icon type="primary" :icon="['fas','user']"></Icon>
         
        </div>
        <div class="icon-item">
          <Icon type="danger" :icon="['fas','user']"></Icon>
        </div>
      </div>
    </div>
  </div>

  
</template>

<script lang="ts" setup>
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
// 确保Icon组件路径正确
import Icon from '../../Icon/icon.vue'
import { 
  faHome, faUser, faCog, faStar, faSpinner, 
  faCircleNotch, faSync 
} from '@fortawesome/free-solid-svg-icons'
import { 
  faGithub, faTwitter, faVuejs 
} from '@fortawesome/free-brands-svg-icons'

// 添加图标到库中
library.add(
  faHome, faUser, faCog, faStar, faSpinner, faCircleNotch, faSync,
  faGithub, faTwitter, faVuejs
)

// https://fontawesome.com/

</script>

<style scoped>
.fontawesome-demo {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.icon-section {
  margin-bottom: 30px;
}

h3 {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
  margin-bottom: 15px;
  color: #555;
}

.icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  text-align: center;
}

.icon-item span {
  margin-top: 8px;
  font-size: 12px;
  color: #666;
}
</style>